<template>
  <!--左侧卡片开始-->
  <div class="col-lg-8 mb-30">
    <!-- 置顶文章开始 -->
      <div class="carausel-post-1 hover-up border-radius-10 overflow-hidden transition-normal position-relative wow fadeInUp animated">
          <div class="arrow-cover"></div>
          <div class="slide-fade">
              <div class="position-relative post-thumb">
                  <div class="thumb-overlay img-hover-slide position-relative" :style="`background-image: url(${topArticle.articleCover})`">
                      <router-link class="img-link"  :to="`/article/${topArticle.id}`"></router-link>
                      <span class="top-left-icon bg-warning"><i class="elegant-icon icon_tag"></i></span>
                      <div class="post-content-overlay text-white ml-30 mr-30 pb-30">
                          <div class="entry-meta meta-0 font-small mb-20">
                              <a v-for="(item,index) in topArticle.tagVOList" :key="item.id" @click="toTag(item)" ><span class="post-cat text-info text-uppercase">{{item.tagName}}</span></a>
                          </div>
                          <h3 class="post-title font-weight-900 mb-20">
                              <a class="text-white" @click="toTopArticle(topArticle)">{{topArticle.articleTitle}}</a>
                          </h3>
                          <div class="entry-meta meta-1 font-small text-white mt-10 pr-5 pl-5">
                              <span class="post-on">{{topArticle.createTime}}</span>
                              <span class="time-reading has-dot">{{getCategoryName}}</span>
                              <span class="hit-count has-dot">{{topArticle.articleView}}次浏览量</span>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!-- 置顶文章结束 -->
      <div class="post-module-2">
          <div class="widget-header-1 position-relative mb-30  wow fadeInUp animated">
              <h5 class="mt-5 mb-30">文章</h5>
          </div>
          <div class="loop-list loop-list-style-1">
              <div class="row">
                  <article class="col-md-6 mb-30 wow fadeInUp  animated" v-for="(item,index) in articleList" :key="item.id">
                      <div class="post-card-1 border-radius-10 hover-up">
                          <div class="post-thumb thumb-overlay img-hover-slide position-relative" :style="`background-image: url(${item.articleCover})`">
                                   <router-link class="img-link" :to="`/article/${item.id}`"></router-link>
                               <router-link :to="`/article/${item.id}`"></router-link>
                          </div>
                          <div class="post-content p-30">
                              <div class="entry-meta meta-0 font-small mb-10" v-for="(item,index) in item.tagVOList"  :key="item.id">
                                  <router-link :to="`/tag/${item.id}`"><span class="post-cat text-warning">{{item.tagName}}</span></router-link>
                              </div>
                              <div class="d-flex post-card-content">
                                  <h5 class="post-title mb-20 font-weight-900">
                                    <router-link :to="`/article/${item.id}`"></router-link>
                                     <router-link :to="`/article/${item.id}`">{{item.articleTitle}}</router-link>
                                      <!-- <a href="single.html">{{item.articleTitle}}</a> -->
                                  </h5>
                                  <!-- <div class="post-excerpt mb-25 font-small text-muted">
                                      <p>{{item.articleContent}}</p>
                                  </div> -->
                                  <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                      <span class="post-on">{{item.createTime}}</span>
                                      <span class="time-reading has-dot" @click="toCategory(item.category.id)" >{{item.category.categoryName}}</span>
                                      <span class="post-by has-dot">{{item.articleView}}次浏览量</span>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </article> 
              </div>
          </div>
      </div>
       
          
  </div>
  <!--左侧卡片结束-->
</template>

<script>
export default {
  name:'LeftCard',
  data() {
    return {
        topArticle:{},
        articleList:[],
        count:0,

    }
  },
  mounted() {
    this.getHomeArticleList();
  },
 computed: {
    getCategoryName() {
      return this.topArticle.category ? this.topArticle.category.categoryName : '';
    }
  },
  methods: {
    async getHomeArticleList(){
        const res = await this.$API.article.getHomeArticleList();
        if(res.code == 200)
        {
            this.topArticle = res.data.recordList[0];
            // 使用 slice 方法来获取剩余的文章（排除第一篇）
            this.articleList = res.data.recordList.slice(1);
            this.count = res.count;
        }else{
            console.log('error',res.code)
            this.$message({
                message: res.msg,
                type: 'error'
            })
        }
    },
    toCategory(categoryId){
        console.log(categoryId)
        this.$router.push({path:`/category/${categoryId}`})
    },
    toTopArticle(topArticle){
        this.$router.push({path:`/article/${topArticle.id}`})
    },

  },
}
</script>

<style>

</style>